<template>
  <div class="box">
    <div class="first" v-for="(item, index) in items" :key="item.id">
      <div class="yd">
        <span class="na"
          ><b>{{ item.name }}</b></span
        >

        <br />
        <span class="am"
          ><b>{{ item.amount }}</b></span
        >
      </div>
      <div class="yd2">
        <br />
        <span class="ch">{{ item.change }}</span>
        <span class="per" :class="colorlist[index]">{{ item.per }}</span>
        <br />
        <span class="de" @click="handleClick">{{ item.detail }}</span>
      </div>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { eventBus } from "@/utils/eventBus";
export default {
  name: "XunHuanfk",
  components: {},
  data: function () {
    return {
      colorlist: ["color1", "color2", "color3", "color4"],
      items: [
        {
          name: "订单量（个）",
          amount: 153,
          change: "同比昨日",
          per: "+5.9%",
          detail: "查看分数详细信息",
          hasMarginTop: true,
        },
        {
          name: "浏览量（个）",
          amount: 376,
          change: "同比昨日",
          per: "-3.1%",
          detail: "查看分数详细信息",
          hasMarginTop: true,
        },
        {
          name: "客单价（个）",
          amount: 31,
          change: "同比昨日",
          per: "+2.8%",
          detail: "查看分数详细信息",
          hasMarginTop: false,
        },
        {
          name: "待付款订单（个）",
          amount: 47,
          change: "同比昨日",
          per: "+6.8%",
          detail: "查看分数详细信息",
          hasMarginTop: false,
        },
      ],
    };
  },
  methods: {
    handleClick() {
      this.$router.push("/home/5-1");
      eventBus.$emit("jumpRouter", "/home/5-1");
    },
  },
};
</script>

<style scoped lang="scss">
.per {
  position: absolute;
  top: 90px;
  left: 45px;
}
.color1 {
  color: red;
}
.color2 {
  color: rgb(9, 219, 107);
}
.color3 {
  color: rgb(255, 0, 0);
}
.color4 {
  color: rgb(219, 9, 9);
}
.box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.first {
  width: 255px;
  height: 255px;
  background-color: rgb(255, 255, 255);
  margin-bottom: 20px;
}
.yd {
  position: relative;
}
.yd2 {
  position: relative;
}
.na {
  font-size: 17px;
  position: absolute;
  top: 23px;
  left: 45px;
}
.am {
  font-size: 50px;
  position: absolute;
  top: 50px;
  left: 45px;
}
.ch {
  font-size: 16px;
  position: absolute;
  top: 87px;
  left: 95px;
}
.de {
  font-size: 13px;
  position: absolute;
  top: 145px;
  left: 45px;
  color: rgb(9, 138, 238);
  cursor: pointer;
}
</style>
